<template>
  <div class="container">
    <!--    头像部分-->
    <div class="general-info">
      <el-card class="box-card" style="height: 150px">

        <el-upload
            class="avatar-uploader"
            action="/api/files/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-card>
    </div>
    <!--    基本信息部分-->
    <div class="base-info">
      <el-card class="box-card" style="height: 100%" shadow="hover">
        <!--      基本信息头文字区域-->
        <div class="base-info-head">
          <span class="base-info-head-text">基本信息</span>
        </div>
        <!--      基本信息表格布局列表-->
        <div class="base-info-content">
          <el-form v-model="form">
            <ul>
              <li>
                <div class="data">用户名</div>
                <el-form-item v-model="form.username">
                  {{ this.form.username }}
                </el-form-item>
              </li>
              <li>
                <div class="data">名&nbsp;&nbsp;&nbsp;&nbsp;称</div>
                <el-form-item v-model="form.nick_name">
                  {{ this.form.nick_name }}
                </el-form-item>
              </li>
              <li>
                <div class="data">年&nbsp;&nbsp;&nbsp;&nbsp;龄</div>
                <el-form-item v-model="form.age">
                  {{ this.form.age }}
                </el-form-item>
              </li>
              <li>
                <div class="data">性&nbsp;&nbsp;&nbsp;&nbsp;别</div>
                <el-form-item v-model="form.sex">
                  {{ this.form.sex }}
                </el-form-item>
              </li>
              <li>
                <div class="data">地&nbsp;&nbsp;&nbsp;&nbsp;址</div>
                <el-form-item v-model="form.address">
                  {{ this.form.address }}
                </el-form-item>
                <!--                <div v-model="form.address"></div>-->
              </li>
              <li style="justify-content: right; margin-right: 50px">
                <el-link icon="el-icon-edit" style="font-size: 30px" @click="editContent">编辑</el-link>
              </li>
            </ul>
          </el-form>

          <!--弹出框，默认是关闭的-->
          <el-dialog
              title="请填写用户信息"
              :visible.sync="centerDialogVisible"
              width="30%"
              center>

            <el-form v-model="form" status-icon label-width="100px" class="demo-ruleForm">
              <el-form-item label="用户名">
                <el-input type="text" v-model="form.username" autocomplete="off" style="width: 240px"></el-input>
              </el-form-item>
              <el-form-item label="名称">
                <el-input v-model="form.nick_name" style="width: 240px"></el-input>
              </el-form-item>
              <el-form-item label="年龄">
                <el-input v-model.number="form.age" style="width: 240px"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-radio v-model="form.sex" label="男">男</el-radio>
                <el-radio v-model="form.sex" label="女">女</el-radio>
                <el-radio v-model="form.sex" label="未知">未知</el-radio>
              </el-form-item>
              <el-form-item label="地址">
                <el-input type="textarea" v-model="form.address" style="width: 240px"></el-input>
              </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="update()">修改</el-button>
          </span>
          </el-dialog>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "PersonalDetails",
  data() {
    return {
      centerDialogVisible: false,
      imageUrl: '',
      form: {
        id: JSON.parse(sessionStorage.getItem("user")).id,
        username: '',
        nick_name: '',
        age: '',
        sex: '',
        address: ''
      },
    }
  },

  /*创建时钩子函数*/
  created() {
    this.userList();
    this.getAvatar();
  }
  ,
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
    ,
    editContent() {
      this.centerDialogVisible = true;
    }
    ,
    update() {
      request.put("/api/user/update", this.form).then((res) => {
        if (res.code === "0") {
          this.$message({
            type: "success",
            message: "修改成功"
          })
        } else {
          this.$message({   //element-ui提供的弹窗信息
            type: "error",
            message: "修改失败"
          })
        }
        this.userList();
        this.centerDialogVisible = false;
      })
    }
    ,
    userList() {
      let id = this.form.id;
      request.get('/api/user/getUser', {params: {id}}).then((res) => {
        this.form.username = res.data.username;
        this.form.nick_name = res.data.nick_name;
        this.form.age = res.data.age;
        this.form.sex = res.data.sex;
        this.form.address = res.data.address;
      })
    },
    getAvatar() {
      request.get('/api/files/getAvatar', {params: {id: this.form.id}}).then((res) => {
        this.imageUrl = res.data
      })
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  cursor: pointer;
  position: relative;
  overflow: hidden;

}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 110px;
  height: 110px;
  line-height: 110px;
  text-align: center;

}

.avatar {
  width: 110px;
  height: 110px;
  display: block;
}

/*主容器布局*/
.container {
  width: auto;
  min-width: 896px;
  min-height: 800px;
  display: block;
  margin: auto 0;
}

.general-info {
  display: block;
  height: 150px;
  width: 900px;
  margin: 10px auto 0;
}


.base-info {
  height: 500px;
  width: 900px;
  margin: 10px auto;
}

.base-info-head {
  height: 48px;
  color: #2e2e2e;
  padding-left: 16px;
  border-bottom: 1px solid #8b8bbf;
}

.base-info-head-text {
  height: 48px;
  line-height: 48px;
  font-size: 18px;
  font-weight: 600;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;

}

.base-info-content {
  font-size: 20px;
  font-family: PingFang SC, Hiragino Sans GB, Arial, Microsoft YaHei, Verdana, Roboto, Noto, Helvetica Neue, sans-serif !important;;
  font-weight: unset;
}

ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 40px;
  margin-top: 40px;
}

li {
  list-style: none;
  display: flex;
  line-height: 24px;
  margin-bottom: 25px;
  border-bottom: #f0f9eb;
}

.data {
  margin-right: 40px;
}

>>> .el-form-item__content {
  display: flex;
  font-size: 20px;
  line-height: 24px;
}


img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}

</style>

<!--
    头像区域样式重写
-->
<style lang="scss">
.avatar-uploader .el-upload{
  border-radius: 50%;
}
</style>


